<template>
  <div class="sy-container">
    <section class="sy1">
      <div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(i,id) in banners">
           <img class="chj_idx_bannerimg" :src="i" alt="">
          </div>

        </div>
        <div class="swiper-pagination swiper-pagination-bullets" style="width: 100vw !important;"></div>
      </div>

    </section>
    <section class="sy2">
      <div class="jsq">
        <h4>资质计算器<span>官方配置计算专用</span></h4>
        <p>一键咨询办资质 免费获取精准报价</p>
        <a href="/Mobile/Calculator">立即体验</a>
      </div>
    </section>
    <section class="sy3">
      <ul>
        <a href="/Mobile/Business">
          <li class="li1">
              <div>
                <img src="~/assets/img/m-sy1.png">
              </div>
              <p>工商服务</p>
          </li>
        </a>
         <a href="/Mobile/Finance">
        <li class="li2">

          <div>
            <img src="~/assets/img/m-sy2.png">
          </div>
          <p>财税服务</p>

        </li>
        </a>
         <a href="/Mobile/KnowLedge">
          <li class="li3">

              <div>
                <img src="~/assets/img/m-sy3.png">
              </div>
              <p>知识产权</p>

          </li>
        </a>
        <a href="/Mobile/personnel">
        <li class="li4">

            <div>
              <img src="~/assets/img/m-sy4.png">
            </div>
            <p>人事社保</p>

        </li>
         </a>
          <a href="/Mobile/Calculator">
        <li class="li5">

            <div>
              <img src="~/assets/img/m-sy5.png">
            </div>
            <p>资质计算器</p>

        </li>
        </a>
      </ul>
      <p class="tt">
        一键咨询办资质 免费获取精准报价一键咨询办资....
      </p>
    </section>
    <section class="sy sy4">
      <h3>工商财税<span>公司设立、财税服务专业解决方案</span><em @click="bar(2,2)">更多</em></h3>
      <div>
        <ul>

            <li v-for="(data,id) in title.index.gscsData.slice(0,4)" :key="id"><img :src="id==0?'img/m-sy41.png':'https://exam.zhonghaiqihang.com/'+data.oneiconimg">
             <a v-bind:href="['/Mobile/ServiceDetails/'+data.id+'?name='+data.id]" style="color: black;">
              <h4>{{data.servicename}}</h4>
              <p>{{data.remark}}</p>
               </a>
            </li>
        </ul>
      </div>
    </section>
    <section class="sy sy5">
      <h3>知识产权<span>为产品提供360度全方位保护</span><em @click="bar(69,68)">更多</em></h3>
      <ul>
        <li v-for="(data,id) in title.index.zscqData.slice(0,4)" :key="id">
          <a v-bind:href="['/Mobile/ServiceDetails/'+data.id+'?name='+data.id]" style="color: black;display: flex;align-items: center;">
            <img :src="'https://exam.zhonghaiqihang.com/'+data.oneiconimg">
            <p>{{data.servicename}}</p>
          </a>
        </li>
      </ul>
    </section>
<!--    <section class="sy sy6">
      <h4>商标注册风险分析</h4>
      <p>先分析在注册<span>提高成功率</span></p>
      <a href="https://p.qiao.baidu.com/cps3/chatIndex?siteToken=a31d186e7b9daffb1301188e07e5b2d1&speedLogId=15982311980177b40_1598231198017_41522&reqParam=%7B%22from%22%3A0%2C%22sessionid%22%3A%227b707d65-f6ab-4852-878f-b77bb9167e7a%22%2C%22siteId%22%3A%2215157864%22%2C%22tid%22%3A%22-1%22%2C%22userId%22%3A%2220820778%22%2C%22ttype%22%3A1%2C%22siteConfig%22%3A%7B%22eid%22%3A%2220820778%22%2C%22queuing%22%3A%22%22%2C%22session%22%3A%7B%22displayName%22%3A%22%E4%B8%AD**%E7%AD%91%22%2C%22headUrl%22%3A%22https%3A%2F%2Fss0.bdstatic.com%2F7Ls0a8Sm1A5BphGlnYG%2Fsys%2Fportraitn%2Fitem%2F9bf2254534254238254144254536254235254237254535253930254146254538253838254141254535254242254241254537254144253931f910.jpg%22%2C%22status%22%3A0%2C%22uid%22%3A0%2C%22uname%22%3A%22%22%7D%2C%22siteToken%22%3A%22a31d186e7b9daffb1301188e07e5b2d1%22%2C%22userId%22%3A%2220820778%22%2C%22isGray%22%3A%22false%22%2C%22wsUrl%22%3A%22wss%3A%2F%2Fp.qiao.baidu.com%2Fcps3%2Fwebsocket%22%2C%22likeVersion%22%3A%22generic%22%2C%22siteId%22%3A%2215157864%22%2C%22online%22%3A%22true%22%2C%22webRoot%22%3A%22%2F%2Fp.qiao.baidu.com%2Fcps3%2F%22%2C%22bid%22%3A%224579783323015157864%22%2C%22isSmallFlow%22%3A0%2C%22isPreonline%22%3A0%2C%22invited%22%3A0%7D%2C%22config%22%3A%7B%22themeColor%22%3A%224d74fa%22%7D%7D">免费获取</a>
    </section> -->
    <section class="sy cmob_sy6">
      <h3>精品商标<span>各类商标 任您挑选</span><em @click="bar(73,71)">更多</em></h3>
     <div v-swiper:mySwiper2="swiperOption" class="cmob_swipe">
        <ul class="swiper-wrapper">
          <li class="swiper-slide af">
            <div class="cmob_brand_item" v-for="(i,index) in title.index.trademarkData.slice(0,4)" :key='index'>
              <div class="cmob_brand_top">
                <a href="JavaScript:;"><img  class="swiper-slide" :src="i.trademarkshowimage == null?'https://exam.zhonghaiqihang.com/'+i.trademarkimage:'https://exam.zhonghaiqihang.com/'+i.trademarkshowimage"></a>
              </div>
              <div class="cmob_brand_bottom">
              	<p class="p1">
                  <span class="span1">{{i.trademarkname}}</span>
                 </p>
              	<p class="p2">
              		<span class="span1">{{i.trademarktype}}类-{{i.trademarktypename}}</span>
              		<span class="span2">{{i.proposalsaleprice}}<i>元</i><em>价格</em></span>
              	</p>
              </div>
            </div>
          </li>
          <li class="swiper-slide af">
            <div class="cmob_brand_item" v-for="(i,index) in title.index.trademarkData.slice(4,8)" :key='index'>
              <div class="cmob_brand_top">
                <a href="JavaScript:;"><img  class="swiper-slide" :src="i.trademarkshowimage == null?'https://exam.zhonghaiqihang.com/'+i.trademarkimage:'https://exam.zhonghaiqihang.com/'+i.trademarkshowimage"></a>
              </div>
              <div class="cmob_brand_bottom">
              	<p class="p1">
                  <span class="span1">{{i.trademarkname}}</span>
                 </p>
              	<p class="p2">
              		<span class="span1">{{i.trademarktype}}类-{{i.trademarktypename}}</span>
              		<span class="span2">{{i.proposalsaleprice}}<i>元</i><em>价格</em></span>
              	</p>
              </div>
            </div>
          </li>
        </ul>
        <div class="swiper-pagination swiper-pagination-bullets" style="width: 100vw !important;"></div>
      </div>
    </section>


    <section class="sy sy7">
      <h3>资质审批<span>各类资质 快速代办</span><em><a href="/Mobile/Mqualifications">更多</a></em></h3>
      <div>
        <ul>
          <li v-for="(data,id) in title.index.zzspData.slice(0,4)" :key="id" :class="'li'+id"><img :src="'https://exam.zhonghaiqihang.com/'+data.oneiconimg">
          <a v-bind:href="['/Mobile/ServiceDetails/'+data.id+'?name='+data.id]" style="color: black;">
            <h4>{{data.servicename}}</h4>
            <p>{{data.remark}}</p>
            </a>
          </li>
        </ul>
      </div>
    </section>
    <section class="sy sy8">
      <h3>优选管家<span style="font-size: .19rem">工商服务、财税服务、知识产权、人事社保、资质审批专业代办</span></h3>
      <div class="one">
        <ul class="nav">
          <li v-for="(data,id) in gjdata" :key="id" :class="id==gjdt?'select':''" @mouseover="gjdt=id">{{data}}</li>
        </ul>

      </div>
      <div class="two">
        <ul class="ct">
          <li v-for="(data,id) in title.gj.slice(gjdt*2,gjdt*2+2)" :key="id" :class="'li'+id+gjdt" :style="{background:'url('+'https://exam.zhonghaiqihang.com'+data.avatar+') no-repeat 0rem 0/3.4rem 2.69rem',width:'3.2rem',height:'2.69rem'}">
            <div class="top">
              <h4>{{data.username}}</h4>

              <p class="p2">经营资质顾问</p>
              <p class="p3">{{data.mobile}}</p>
            </div>
            <a @click="chj_gj(data,id)"  href="JavaScript:;">立即咨询</a>
          </li>
        </ul>
      </div>
    </section>
    <section class="sy sy9">
      <h3>用心对待<span>一个互联网服务品牌 企业服务智能升级的实践者</span> <em @click="more()">更多</em></h3>
      <ul>
        <li><img src="~/assets/img/m-sy91.png">
          <p>快速响应</p>
        </li>
        <li><img src="~/assets/img/m-sy92.png">
          <p>信息安全</p>
        </li>
        <li><img src="~/assets/img/m-sy93.png">
          <p>进度掌握</p>
        </li>
        <li><img src="~/assets/img/m-sy94.png">
          <p>专属服务</p>
        </li>
        <li><img src="~/assets/img/m-sy95.png">
          <p>提供售后</p>
        </li>
      </ul>

    </section>
    <section class="sy sy10">
      <h3>行业资讯<span>一个互联网服务品牌 企业服务智能升级的实践者</span></h3>
      <ul class="nav">
        <li v-for="(data,id) in title.hy.info.slice(0,3)" :key="id" :class="hydt==id?'select':''" @mouseover="hydt=id">{{data.typename}}</li>
      </ul>
      <ul class="ct" :style="hydt==0?'display:block':'display:none'">
        <li v-for="(data,id) in title.hy.info[0].info.slice(0,4)" :key="id" :class="hydt2==id?'select':''" @mouseover="hydt2=id" @click="qh(data.id,0)">
          <div class="nomal">
            <p class="p2">{{data.title}}</p>
            <p class="p3">{{data.createtime}}</p>
          </div>
          <div class="hover"><img :src="'https://exam.zhonghaiqihang.com'+data.image">
            <div>
              <p class="p4">{{data.title}}</p>
              <p class="p5">{{data.summary}}</p>
            </div>
          </div>
        </li>
      </ul>
      <ul class="ct" :style="hydt==1?'display:block':'display:none'">
        <li v-for="(data,id) in title.hy.info[1].info.slice(0,4)" :key="id" :class="hydt3==id?'select':''" @mouseover="hydt3=id" @click="qh(data.id,1)">
          <div class="nomal">
            <p class="p2">{{data.title}}</p>
            <p class="p3">{{data.createtime}}</p>
          </div>
          <div class="hover"><img :src="'https://exam.zhonghaiqihang.com'+data.image">
            <div>
              <p class="p4">{{data.title}}</p>
              <p class="p5">{{data.summary}}</p>
            </div>
          </div>
        </li>
      </ul>
      <ul class="ct" :style="hydt==2?'display:block':'display:none'">
        <li v-for="(data,id) in title.hy.info[2].info.slice(0,4)" :key="id" :class="hydt4==id?'select':''" @mouseover="hydt4=id" @click="qh(data.id,2)">
          <div class="nomal">
            <p class="p2">{{data.title}}</p>
            <p class="p3">{{data.createtime}}</p>
          </div>
          <div class="hover"><img :src="'https://exam.zhonghaiqihang.com'+data.image">
            <div>
              <p class="p4">{{data.title}}</p>
              <p class="p5">{{data.summary}}</p>
            </div>
          </div>
        </li>
      </ul>
    </section>
    <section class="sy11">
      <a href="tel:4008551888">400-855-1888</a>
    </section>
  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';

  // import Logo from '~/components/Logo.vue'

  export default {

    components: {
      // Logo
    },
    data(){
      return{
        datas:null,
        gjdata:['工商服务管家','财税服务管家','知识产权管家','人事社保管家','资 质审批管家'],
        banners:['img/chjm_gsfw.JPG','img/chjm_zx.JPG','img/chjm_bg.JPG','img/chjm_zr.JPG'],
        gjdt:0,
        hydt:0,
        hydt2:0,
        hydt3:0,
        hydt4:0,
        swiperOption: {
          loop: true,
          slidesPerView: 'auto',
          centeredSlides: true,
          observer:true,
          observeParents:true,
          autoplay:{
            delay:5000,
            disableOnInteraction:false,
            spaceBetween:5000,
            loop:true,
          },
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true
          },
          on: {
            slideChange() {
            },
            tap() {
            }
          }
        },

      }
    },
    async asyncData ({ params }) {
    let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
    let nh2 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Index/indexData`);
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`);
    // let nh4 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/FriendLink/friendLinkData`);
    let nh5 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Info/infoData`);
    let data  = {nav:nh.data,index:nh2.data,gj:nh3.data,hy:nh5.data};
    return { title: data}
  },
  head(){
    return {
      title: this.title.index.homepageconfigData.title,
      meta: [
        { hid: 'description', name: 'description', content: this.title.index.homepageconfigData.descript},
        { hid: 'keywords', name: 'keywords', content:this.title.index.homepageconfigData.keyword }
      ]
    }
  },
  mounted:function(){

    console.log(this.title)

    $('header').show();
    // function IsPC() {
    //   var userAgentInfo = navigator.userAgent;
    //   var Agents = ["Android", "iPhone",
    //     "SymbianOS", "Windows Phone",
    //     "iPad", "iPod"];
    //   var flag = true;
    //   for (var v = 0; v < Agents.length; v++) {
    //     if (userAgentInfo.indexOf(Agents[v]) > 0) {
    //       flag = false;
    //       break;
    //     }
    //   }
    //   return flag;
    // }
    // if(IsPC()){
    //   this.$router.push('/');
    // }else{
    //
    // }
  }
  ,methods:{

    chj_gj:function(e1,e2){
      let href = '/Mobile/visitingCard/'+e1.id
      location.href = href;
    },

    bar:function(e1,e2){
      let href = '/Mobile/ServiceDetails/'+e1+'?name='+e2;
      location.href = href;
    },

    more:function(e){
      location.href = '/Mobile/More';
    },
    tzym:function(e){
      location.href = e;
    },
    // xqymtz:function(e1,e2){
    //   let href = '/Mobile/ServiceDetails/'+e1+'?name='+e2;
    //    location.href = href;
    // },

    qh:function(e,e2) {
       var _this = this;
      if (e2 != undefined) {
        const new1 = this.$router.push('/Mobile/Details/'+e+'?name='+e2);
        // window.open(new1.href, '_blank');
      }

     }
  }

  }
</script>

<style>

</style>
